<template>
    <!-- 抽奖活动弹窗 -->
    <div>
        <el-dialog v-if="isShow" :visible.sync="ActivitydialogVisible" :width="width" :append-to-body="true" @close="closeDialog()">
            <div class="div_img">
                <img :src="currentActivity.activitePicture" class="img" @load="onLoad" @click="Activity(currentActivity)" />
                <div class="close" @click="ActivitydialogVisible = false"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ["parentData"],
  created () {
    this.photoactivity = this.parentData;
    for (let i = 0; i < this.photoactivity.length; i++) {
      if (this.photoactivity[i].priority !== 0) {
        this.photoact.push(this.photoactivity[i])
      }
    };
    if (this.photoact.length === 0) {
      this.isShow = false
    } else {
      this.isShow = true
    }
    setTimeout(() => { this.ActivitydialogVisible = true }, 1000)
  },
  data () {
    return {
      width: '',
      ActivitydialogVisible: false,
      Memberloginoption: '',//会员登录选项开关
      photoactivity: '',//图片信息
      photoact: [],//图片信息
      currentActivityIndex: 0,
      timer: 4000,
      timer2: '',
      isShow: false,//判断数组为空不显示
    };
  },
  mounted () {
    this.timer2 = setInterval(() => {
      this.currentActivityIndex = (this.currentActivityIndex + 1) % this.photoact.length
    }, this.timer)
  },
  methods: {
    Activity (value) {
      this.$EventBus.$emit('activeMenu', 5)//!选中活动菜单
      setTimeout(() => {
        this.ActivitydialogVisible = false
      }, 50)
      // 去抽奖页面
      if (value.activityMethod == 2) {
        this.$parent.ishowActivity = true
        this.$parent.zhuanpan = true//!转盘
      } else if (value.activityMethod == 1) {
        this.$parent.ishowActivity = true
        this.$parent.jiugongge = true//!九宫格
      } else {
        if (this.user_mes && this.user_mes.user) {
          this.$EventBus.$emit('open_VoucherCenterdialogVisible', true)//!打开充值弹窗
        } else {
          this.$EventBus.$emit('ishow_loginDialog', true);//!打开登录弹窗
        }
      }
    },
    // 关闭弹窗
    closeDialog () {
      this.$parent.showbtn = true;
      this.$parent.activityhight = false;
      // this.$parent.tagsheight = false
    },
    onLoad () {
      let image = document.querySelector('.img');
      this.width = image.naturalWidth + 'px'; //获取图片原始宽度赋值给dialog
    },
  },
  computed: {
    ...mapState(['user_mes', 'user']),
    currentActivity () {
      return this.photoact[this.currentActivityIndex]
    }
  },
  watch: {},
  filters: {},
  components: {},
};
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
    display: none;
}
/deep/ .el-dialog__body {
    padding: 0;
}
.img {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
}
.close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background-image: url('@/assets/user/close.png');
    cursor: pointer;
    &:hover {
        background-image: url('@/assets/user/close2.png');
    }
}
</style>
